<template>
  <div class="cms">
    <div class="cms-container">
      <div class="cms-aside">
        <div class="menu">
          <div
            :class="{ menu__item: true, active: type == 0 }"
            @click="goToEdit"
          >
            <div class="menu__item__top">
              <img
                class="menu__item__top__left"
                src="../assets/images/icons/icon_publish_normal.png"
                alt="发表"
                v-if="type != 0"
              />
              <img
                class="menu__item__top__left"
                src="../assets/images/icons/icon_publish_pressed.png"
                alt="发表"
                v-else
              />
              <span class="menu__item__top__right"> 发表</span>
            </div>
            <div class="menu__item__bottom">内容发布</div>
          </div>
          <div
            :class="{ menu__item: true, active: type == 1 }"
            @click="goToManager"
          >
            <div class="menu__item__top">
              <img
                class="menu__item__top__left"
                src="../assets/images/icons/icon_manage_normal.png"
                alt="管理"
                v-if="type != 1"
              />
              <img
                class="menu__item__top__left"
                src="../assets/images/icons/icon_manage_pressed.png"
                alt="管理"
                v-else
              />
              <span class="menu__item__top__right"> 管理</span>
            </div>
            <div class="menu__item__bottom">我的内容</div>
          </div>
        </div>
      </div>
      <div class="cms-main">
        <nuxt-child> </nuxt-child>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      routName: '',
    }
  },
  created() {
    this.routName = this.$route.name
  },
  computed: {
    // 0   编辑 1 内容
    type() {
      let type = this.routName.split('-')[1]
      switch (type) {
        case 'editor':
          return 0
        case 'manager':
          return 1
      }
    },
  },
  methods: {
    goToEdit() {
      debugger
      this.$router.push({ path: '/cms/editor/article' })
    },
    goToManager() {
      this.$router.push({ path: '/cms/manager/article' })
    },
  },
  watch: {
    $route(to, from) {
      this.routName = to.name
    },
  },
}
</script>
<style scoped lang="scss">
.cms {
  background: $color-back-grey;
  .cms-container {
    margin: 24px auto;
    width: 1200px;
    display: flex;
    min-height: 75vh;
    margin-top: 4px;
    .cms-aside {
      width: 200px;
      margin-right: 24px;
      background: $color-background;
    }
    .cms-main {
      flex: 1;
      background: $color-background;
    }
  }
  .menu {
    padding-top: 8px;
    .menu__item {
      padding: 24px;
      font-size: 16px;
      cursor: pointer;
      .menu__item__top {
        display: flex;
        font-weight: 400;
        align-items: center;
        padding-bottom: 16px;
        color: inherit;
        .menu__item__top__left {
          width: 24px;
          margin-right: 8px;
          color: inherit;
        }
        .menu__item__top__right {
          font-size: 16px;
          font-weight: 400;
          color: inherit;
        }
      }
      .menu__item__bottom {
        font-weight: 500;
        margin-left: 40px;
        color: inherit;
      }
    }
  }
  .active {
    color: $color-royole;
  }
}
</style>
